<!--  -->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="show"
      width="650px"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :before-close="handleClose"
    >
      <div class="dialog-content" v-if="show">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          :highlight-current="true"
          :default-expanded-keys="[this.label]"
          :node-key="nodeKey"
          ref="treeBox"
          class="elTree"
          @node-click="handleNodeClick"
          lazy
          :load="loadNode"
        ></el-tree>
      </div>
      <span slot="footer">
        <el-button @click="confirm" type="primary" size="medium" :disabled="isConfirm">确 定</el-button>
        <el-button @click="handleClose" size="medium">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 
      使用规则：import GetXdbm from "@/dialogCommom/GetXdbm";   
              <GetXdbm ref="getXdbmRef" @handleGetXdbm="handleGetXdbm"></GetXdbm>
              handleGetXdbm  数据回传方法
     -->
  </div>
</template>

<script>
import { getZczyTree } from "../api/sjwh/zczy.js";

export default {
  data() {
    return {
      show: false,
      treeData: [],
      defaultProps: {
        label: "label",
        children: "child",
        isLeaf: "leaf",
      },
      label: "",
      nodeKey: "label",
      callData: [],
      title: '',
      isConfirm: true
    };
  },

  components: {},

  computed: {},

  watch: {},

  computed: {},

  created() {},

  mounted() {},

  beforeUpdate() {
    //解决列配置引发的滚动条问题
  },

  update() {},

  destroyed() {},

  methods: {
    /**打开弹窗 */
    openXdbm() {
      const that = this
      that.show = true;
      that.title = '线段编码选择'
    },

    /**关闭弹窗 */
    handleClose() {
      this.show = false;
    },

    /**确定 */
    confirm() {
        const that = this
        if(that.callData && that.callData.length == 0){
            that.$message.warning('请选择一个线段编码')
            return false
        }
        that.$emit('handleGetXdbm', that.callData)
        that.show = false
        that.callData = []
    },
    
    /**点击树节点 */
    handleNodeClick(data) {
      const that = this
      that.callData = []
      if (data.icon == 'icon-tree-xd') {
        that.isConfirm = false
        that.callData.push(data)
      } else {
        that.isConfirm = true
      }
    },

    /**树的懒加载 */
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.getTreeLevel(resolve);
      } else {
        this.getNextTree(node, resolve);
      }
    },

    /**获取一级节点数据 */
    async getTreeLevel(resolve) {
      const that = this
      let treeNode = JSON.parse(sessionStorage.getItem('treeNode'))
      if (treeNode) {
        that.dwbm = treeNode.dwbm
        that.dwbm = treeNode.dwbm
        let reqData = {
            dwbm: that.dwbm,
            level: ""
        }
        let res = await getZczyTree(reqData)
        if(res.code === 0){
            that.label = res.data[0].label
            return resolve(res.data)
        }else{
            that.$message.error(res.message)
        }
      }
    },

    /**获取下级节点数据 */
    async getNextTree(node, resolve) {
        const that = this
        let reqData = {
            dwbm: that.dwbm,
            level: node.data.data.level,
            xdbmLike: node.data.data.xdbm
        }
        let res = await getZczyTree(reqData)
        if(res.code === 0){
            return resolve(res.data)
        }else{
            that.$message.error(res.message)
        }
    }
  }
};
</script>
<style lang='scss' scoped>
/deep/ .el-tree-node__content{
  &:hover{
    background-color: #e4f0fd;
  }
}
/deep/ .el-tree-node.is-current > .el-tree-node__content {
    background-color: #e4f0fd !important;
  }
.dialog-content {
  width: 100%;
}
.tree-container {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.dialog-content{
  width: 100%;
  height: 300px;
  overflow: auto;
}
/deep/ .el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
/deep/ .el-dialog__footer{
  padding: 5px 10px 5px;
}
/deep/ .el-dialog__header{
  padding: 4px 10px 4px;
  line-height: 40px;
}
/deep/ .el-dialog__headerbtn{
  top: 10px;
}

</style>
